


<template>
  <div style="display: flex" class="tempxyz menmuStyle">
    <CCard class="rightCard">
      <CCardHeader class="header-wraper">
        <div class="header-left-titleWraper">
          <span class="textTitle">告警设置</span>
        </div>
      </CCardHeader>
      <CCardBody class="card-body">
        <div style="height: calc(100% - 46px)">
          <Tabs type="card">
            <TabPane label="告警阈值">
              <div
                style="
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  width: 100%;
                  align-items: center;
                  height: 100%;
                "
              >
                <Form ref="yuzhi" :label-width="240" >
                  <template v-for="item in yuzhi">
                    <FormItem
                      :label="item.configDesc"
                      :key="item.id"
                      v-if="!item.configFlag"
                    >
                      <InputNumber
                        :max="100"
                        :min="0"
                        v-model="item.configValue"
                      ></InputNumber>
                    </FormItem>
                  </template>
                  <!-- <FormItem label="CPU高使用率持续时间（分钟）" prop="name">
                                           <InputNumber  :min="1" v-model="formValidate.name"></InputNumber>
                                       </FormItem>
                                       <FormItem label="内存使用率告警阈值（%）" prop="name">
                                           <InputNumber :max="100" :min="0" v-model="formValidate.name"></InputNumber>
                                       </FormItem>
                                       <FormItem label="内存高使用率持续时间（分钟）" prop="name">
                                           <InputNumber  :min="1" v-model="formValidate.name"></InputNumber>
                                       </FormItem>
                                        <h4 class="titleClass">存储告警设置</h4>
                                       <FormItem label="告警阈值（小于，TB）" prop="name">
                                           <InputNumber  :min="1" v-model="formValidate.name"></InputNumber>
                                       </FormItem>

                                       <FormItem label="数据上传/下载速度（小于，MB）" prop="name">
                                           <InputNumber  :min="1" v-model="formValidate.name"></InputNumber>
                                       </FormItem>
                                       <FormItem label="网络低速持续时间（分钟）" prop="name">
                                           <InputNumber  :min="1" v-model="formValidate.name"></InputNumber>
                                       </FormItem>-->
                  <FormItem>
                    <Button
                      @click="yuzhiReset('formValidate')"
                      style="margin-right: 8px"
                      >重置</Button
                    >
                    <Button type="primary" @click="yuzhiSubmit('formValidate')"
                      >确定</Button
                    >
                  </FormItem>
                </Form>
              </div>
            </TabPane>
            <TabPane label="告警内容">
              <div
                style="
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  width: 100%;
                  align-items: center;
                "
              >
                <CheckboxGroup v-model="checkList" style="width: 65%">
                  <template v-for="(item, index) in gaojing">
                    <div :key="index" v-if="!item.configFlag">
                      <Checkbox
                        :label="item"
                        style="width: 15%"
                        v-model="item.configUseFlag"
                        true-value="0"
                        false-value="1"
                      >
                        {{ item.configDesc }}
                      </Checkbox>
                      <Input
                        v-model="item.configContent"
                        placeholder="请输入内容..."
                        style="width: 75%"
                      ></Input>
                    </div>
                  </template>
                </CheckboxGroup>
                <div style="display: flex; margin-top: 15px; margin-right: 10%">
                  <Button
                    @click="gaojingReset('formValidate')"
                    style="margin-right: 8px"
                    >重置</Button
                  >
                  <Button type="primary" @click="gaojingSubmit('formValidate')"
                    >确定</Button
                  >
                </div>
               <div @click="stateDetail" class="stateStyle" >
                  <span>说明：</span>
                   <i class="fa fa-chevron-down" aria-hidden="true"></i>
               </div>

                <div style=" margin-right: 10%" v-show="detailLook">
                  <dl>
                    <dt>
                      注：告警信息中可添加系统变量，说明时间、节点名、存储名等信息；常见变量名如下：
                    </dt>
                    <dd>SYSTEM_STATISTIC_TIME： 告警时间</dd>
                    <dd>SYSTEM_NODE_X：节点名</dd>
                    <dd>SYSTEM_STORAGE_X_CAPACITY: 硬盘存储百分比</dd>
                    <dd>SYSTEM_MEMORY_USE_RATIO:内存存储百分比</dd>
                    <dd>SYSTEM_CPU_USE_RATIO: CPU使用百分比</dd>
                    <dd>SYSTEM_STORAGE_MOUNT_X: 共享存储路径</dd>
                  </dl>
                  <dl>
                    <dt>举例说明：</dt>
                    <dd>
                      例子1：2021-11-17 12:12:30
                      节点1离线！：可以配置为：SYSTEM_STATISTIC_TIME
                      SYSTEM_NODE_X离线！
                    </dd>
                    <dd>
                      例子2：2021-11-17 12:12:30
                      节点1的CPU使用率高于95%，请分析处理输入是否正确！：可以配置为：SYSTEM_STATISTIC_TIME
                      SYSTEM_NODE_X的CPU使用率高于SYSTEM_CPU_USE_RATIO，请分析处理输入是否正确！
                    </dd>
                  </dl>
                </div>
                <!-- <Form ref="gaojing" :label-width="240">
                  <template v-for="item in gaojing">
                    <FormItem
                      :label="item.configDesc"
                      :key="item.id"
                      v-if="!item.configFlag"
                    >
                      <Input
                        v-model="item.configContent"
                        placeholder="请输入内容..."
                        style="width: 300px"
                      ></Input>
                    </FormItem>
                  </template>
                  <FormItem>
                    <Button
                      @click="gaojingReset('formValidate')"
                      style="margin-right: 8px"
                      >重置</Button
                    >
                    <Button
                      type="primary"
                      @click="gaojingSubmit('formValidate')"
                      >确定</Button
                    >
                  </FormItem>
                </Form> -->
              </div>
            </TabPane>
            <TabPane label="通知对象">
              <div
                style="
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  width: 100%;
                  align-items: center;
                "
              >
                <Form
                  ref="formValidate"
                  :model="formValidate"
                  :label-width="240"
                >
                  <RadioGroup v-model="formValidate.userConfigSetting">
                    <Radio :label="0">统一设置</Radio>
                    <Radio :label="1">分别设置</Radio>
                  </RadioGroup>
                  <div v-if="formValidate.userConfigSetting == 0">
                    <FormItem label="通知对象">
                      <Select
                        v-model="formValidate.allSetting.userRoleIds"
                        multiple
                        style="width: 260px"
                      >
                        <Option
                          v-for="item in tySelectList"
                          :value="item.id"
                          :key="item.id"
                          >{{
                            item.nickname ? item.nickname : item.name
                          }}</Option
                        >
                      </Select>
                      <RadioGroup
                        v-model="formValidate.allSetting.userRoleType"
                        @on-change="getSelectChange($event, 'allSetting')"
                      >
                        <Radio :label="1">按角色</Radio>
                        <Radio :label="0">按人员</Radio>
                      </RadioGroup>
                    </FormItem>
                  </div>

                  <div v-else>
                    <FormItem label="CPU告警对象">
                      <Select
                        v-model="formValidate.cpuSetting.userRoleIds"
                        multiple
                        style="width: 260px"
                      >
                        <Option
                          v-for="item in cpuSelectList"
                          :value="item.id"
                          :key="item.id"
                          >{{
                            item.nickname ? item.nickname : item.name
                          }}</Option
                        >
                      </Select>
                      <RadioGroup
                        v-model="formValidate.cpuSetting.userRoleType"
                        @on-change="getSelectChange($event, 'cpuSetting')"
                      >
                        <Radio :label="1">按角色</Radio>
                        <Radio :label="0">按人员</Radio>
                      </RadioGroup>
                    </FormItem>

                    <FormItem label="内存告警对象">
                      <Select
                        v-model="formValidate.memSetting.userRoleIds"
                        multiple
                        style="width: 260px"
                      >
                        <Option
                          v-for="item in ncSelectList"
                          :value="item.id"
                          :key="item.id"
                          >{{
                            item.nickname ? item.nickname : item.name
                          }}</Option
                        >
                      </Select>
                      <RadioGroup
                        v-model="formValidate.memSetting.userRoleType"
                        @on-change="getSelectChange($event, 'memSetting')"
                      >
                        <Radio :label="1">按角色</Radio>
                        <Radio :label="0">按人员</Radio>
                      </RadioGroup>
                    </FormItem>

                    <FormItem label="存储告警对象">
                      <Select
                        v-model="formValidate.diskSetting.userRoleIds"
                        multiple
                        style="width: 260px"
                      >
                        <Option
                          v-for="item in ccSelectList"
                          :value="item.id"
                          :key="item.id"
                          >{{
                            item.nickname ? item.nickname : item.name
                          }}</Option
                        >
                      </Select>
                      <RadioGroup
                        v-model="formValidate.diskSetting.userRoleType"
                        @on-change="getSelectChange($event, 'diskSetting')"
                      >
                        <Radio :label="1">按角色</Radio>
                        <Radio :label="0">按人员</Radio>
                      </RadioGroup>
                    </FormItem>

                    <FormItem label="节点告警对象">
                      <Select
                        v-model="formValidate.nodeSetting.userRoleIds"
                        multiple
                        style="width: 260px"
                      >
                        <Option
                          v-for="item in jieDianSelectList"
                          :value="item.id"
                          :key="item.id"
                          >{{
                            item.nickname ? item.nickname : item.name
                          }}</Option
                        >
                      </Select>
                      <RadioGroup
                        v-model="formValidate.nodeSetting.userRoleType"
                        @on-change="getSelectChange($event, 'nodeSetting')"
                      >
                        <Radio :label="1">按角色</Radio>
                        <Radio :label="0">按人员</Radio>
                      </RadioGroup>
                    </FormItem>

                    <FormItem label="共享存储告警对象">
                      <Select
                        v-model="formValidate.sharedStorageSetting.userRoleIds"
                        multiple
                        style="width: 260px"
                      >
                        <Option
                          v-for="item in gongXiangSelectList"
                          :value="item.id"
                          :key="item.id"
                          >{{
                            item.nickname ? item.nickname : item.name
                          }}</Option
                        >
                      </Select>
                      <RadioGroup
                        v-model="formValidate.sharedStorageSetting.userRoleType"
                        @on-change="
                          getSelectChange($event, 'sharedStorageSetting')
                        "
                      >
                        <Radio :label="1">按角色</Radio>
                        <Radio :label="0">按人员</Radio>
                      </RadioGroup>
                    </FormItem>
                  </div>
                  <FormItem>
                    <Button @click="tongzhiReset()" style="margin-right: 8px"
                      >取消</Button
                    >
                    <Button type="primary" @click="tongzhiSubmit()"
                      >确定</Button
                    >
                  </FormItem>
                </Form>
              </div>
            </TabPane>
          </Tabs>
        </div>
      </CCardBody>
    </CCard>
  </div>
</template>

<script>
export default {
  name: "alarmSetUp",
  data() {
    return {
      detailLook:false,
      checkList: [],
      formValidate: {
        userConfigSetting: 1,
        allSetting: {
          userRoleType: 0,
          userRoleIds: [],
        },
        cpuSetting: {
          userRoleType: 0,
          userRoleIds: [],
        },
        memSetting: {
          userRoleType: 0,
          userRoleIds: [],
        },
        diskSetting: {
          userRoleType: 0,
          userRoleIds: [],
        },

        nodeSetting: {
          userRoleType: 0,
          userRoleIds: [],
        },
        sharedStorageSetting: {
          userRoleType: 0,
          userRoleIds: [],
        },
      },
      tongzhiCopy: {},

      juese: [],
      renyuan: [],

      yuzhi: [],
      yuzhiCopy: [],

      gaojing: [],
      gaojingCopy: [],
      gaojingCopyCheckList: [],
    };
  },
  async mounted() {
    let that = this;
    // queryAllUser

    this.http.get(this.$api.manageApi.getRole).then((res) => {
      that.juese = res.data.data.roleList;
    });
    this.http.get(this.$api.manageApi.queryAllUser).then((res) => {
      that.renyuan = res.data.data.userList;
    });
    await this.getFormData();
  },
  methods: {
    stateDetail(){
        this.detailLook=!this.detailLook
    },
    findChange(data) {
      let that = this;
      let newData = data.filter((item, index) => {
        return item.configValue != that.yuzhiCopy[index].configValue;
      });
      return newData;
    },

    getFormData() {
      let that = this;
      this.http.get(this.$api.monitorApi.selectAll).then((res) => {
        that.yuzhiCopy = JSON.parse(JSON.stringify(res.data.data));
        that.yuzhi = res.data.data;
      });
      this.http.get(this.$api.monitorApi.contentSelectAll).then((res) => {
        that.gaojing = res.data.data;
        this.checkList = [];
        res.data.data.forEach((ele) => {
          if (ele.configUseFlag == "0") this.checkList.push(ele);
        });
        that.gaojingCopy = JSON.parse(JSON.stringify(res.data.data));
        that.gaojingCopyCheckList = JSON.parse(JSON.stringify(this.checkList));
      });
      this.http.get(this.$api.monitorApi.select_all_list).then((res) => {
        if (!res.data.data.allSetting) {
          res.data.data.allSetting = that.formValidate.allSetting;
        }
        if (!res.data.data.cpuSetting) {
          res.data.data.cpuSetting = that.formValidate.cpuSetting;
        }
        if (!res.data.data.memSetting) {
          res.data.data.memSetting = that.formValidate.memSetting;
        }
        if (!res.data.data.diskSetting) {
          res.data.data.diskSetting = that.formValidate.diskSetting;
        }
        if (!res.data.data.nodeSetting) {
          res.data.data.nodeSetting = that.formValidate.nodeSetting;
        }
        if (!res.data.data.sharedStorageSetting) {
          res.data.data.sharedStorageSetting =
            that.formValidate.sharedStorageSetting;
        }
        that.tongzhiCopy = JSON.parse(JSON.stringify(res.data.data));
        that.formValidate = res.data.data;
      });
    },

    yuzhiReset() {
      this.yuzhi = JSON.parse(JSON.stringify(this.yuzhiCopy));
    },

    yuzhiSubmit() {
      let that = this;
      this.$refs.yuzhi.validate((valid) => {
        if (valid) {
          that.$Modal.confirm({
            title: "修改阈值",
            content: "<p>请确认是否修改阈值</p>",
            onOk: () => {
              let newForm = that.findChange(that.yuzhi);

              that.http
                .put(this.$api.monitorApi.updateById, newForm)
                .then((res) => {
                  if (res.data.success) {
                    that.yuzhiCopy = JSON.parse(JSON.stringify(that.yuzhi));
                    that.$Message.success("更新成功！");
                  } else {
                    that.$Message.error("更新失败！");
                  }
                })
                .catch((err) => {
                  this.$Message.error(err);
                });
            },
            onCancel: () => {},
          });
        } else {
          that.$Message.info("校验失败！");
        }
      });
    },

  gaojingReset() {
    
      this.gaojing = JSON.parse(JSON.stringify(this.gaojingCopy));
        this.checkList = [];
    },

    gaojingSubmit() {
      let that = this;
      that.$Modal.confirm({
        title: "修改内容",
        content: "<p>请确认是否修改提示内容</p>",
        onOk: () => {
          let bb = JSON.parse(JSON.stringify(this.gaojingCopy));
          let cc = bb.map((ele) => {
            ele.configUseFlag = 1;  
            return ele;
          });
          let datailData = [...cc].filter(
            (x) => ![...this.checkList].some((y) => y.id == x.id)
          );
          datailData = datailData.concat(this.checkList);
          that.http
            .put(that.$api.monitorApi.updateList, datailData)
            .then((res) => {
              if (res.data.success) {
                that.gaojingCopy = JSON.parse(JSON.stringify(that.gaojing));
                that.gaojingCopyCheckList = JSON.parse(
                  JSON.stringify(this.checkList)
                );
                that.$Message.success("更新成功！");
              } else {
                that.$Message.error("更新失败！");
              }
            })
            .catch((err) => {
              that.$Message.error(err);
            });
          // } else {
          //   that.$Message.error("请选择告警内容");
          // }
        },
        onCancel: () => {},
      });
    },

    tongzhiReset() {
      if (this.formValidate.userConfigSetting == 0) {
        this.tongzhiCopy.userConfigSetting = 0;
      } else {
        this.tongzhiCopy.userConfigSetting = 1;
      }
      this.formValidate = JSON.parse(JSON.stringify(this.tongzhiCopy));
    },

    tongzhiSubmit() {
      let that = this;
      this.$refs.formValidate.validate((valid) => {
        if (valid) {
          that.$Modal.confirm({
            title: "修改内容",
            content: "<p>请确认是否修改提醒?</p>",
            onOk: () => {
              that.http
                .put(that.$api.monitorApi.configSave, that.formValidate)
                .then((res) => {
                  if (res.data.success) {
                    if (that.formValidate.userConfigSetting == 0) {
                      that.formValidate.cpuSetting.userRoleIds = [];
                      that.formValidate.memSetting.userRoleIds = [];
                      that.formValidate.diskSetting.userRoleIds = [];
                      that.formValidate.nodeSetting.userRoleIds = [];
                      that.formValidate.sharedStorageSetting.userRoleIds = [];
                    } else {
                      that.formValidate.allSetting.userRoleIds = [];
                    }
                    that.tongzhiCopy = JSON.parse(
                      JSON.stringify(that.formValidate)
                    );
                    that.$Message.success("更新成功！");
                  } else {
                    that.$Message.error("更新失败！");
                  }
                })
                .catch((err) => {
                  that.$Message.error(err);
                });
            },
            onCancel: () => {},
          });
        } else {
          that.$Message.info("校验失败！");
        }
      });
    },

    getSelectChange(value, data) {
      this.formValidate[data].userRoleIds = [];
    },
  },
  computed: {
    tySelectList() {
      let that = this;
      let data = [];
      if (!that.formValidate.allSetting) return;
      that.formValidate.allSetting.userRoleType == "1"
        ? (data = JSON.parse(JSON.stringify(that.juese)))
        : (data = JSON.parse(JSON.stringify(that.renyuan)));

      return data;
    },
    cpuSelectList() {
      let that = this;
      let data = [];
      if (!that.formValidate.cpuSetting) return;
      that.formValidate.cpuSetting.userRoleType == "1"
        ? (data = JSON.parse(JSON.stringify(that.juese)))
        : (data = JSON.parse(JSON.stringify(that.renyuan)));

      return data;
    },
    ncSelectList() {
      let that = this;
      let data = [];
      if (!that.formValidate.memSetting) return;
      that.formValidate.memSetting.userRoleType == "1"
        ? (data = JSON.parse(JSON.stringify(that.juese)))
        : (data = JSON.parse(JSON.stringify(that.renyuan)));

      return data;
    },
    ccSelectList() {
      let that = this;
      let data = [];
      if (!that.formValidate.diskSetting) return;
      that.formValidate.diskSetting.userRoleType == "1"
        ? (data = JSON.parse(JSON.stringify(that.juese)))
        : (data = JSON.parse(JSON.stringify(that.renyuan)));

      return data;
    },
    jieDianSelectList() {
      let that = this;
      let data = [];
      if (!that.formValidate.nodeSetting) return;
      that.formValidate.nodeSetting.userRoleType == "1"
        ? (data = JSON.parse(JSON.stringify(that.juese)))
        : (data = JSON.parse(JSON.stringify(that.renyuan)));

      return data;
    },
    gongXiangSelectList() {
      let that = this;
      let data = [];
      if (!that.formValidate.sharedStorageSetting) return;
      that.formValidate.sharedStorageSetting.userRoleType == "1"
        ? (data = JSON.parse(JSON.stringify(that.juese)))
        : (data = JSON.parse(JSON.stringify(that.renyuan)));
      return data;
    },
  },
};
</script>

<style scoped>
.rightCard {
  width: 80%;
  flex: 1;
}

.leftCard {
  width: 18%;
}
/deep/.card {
  margin-bottom: 0;
}
.headerMar {
  margin-left: 10px;
}

/deep/.ivu-input-number {
  width: 300px;
}
.titleClass {
  color: var(--label-font-color, #5d8bc4);
}
/deep/.ivu-form-item {
  margin-bottom: 15px;
}
/deep/.ivu-tabs {
  height: 100%;
}
.stateStyle {
  font-weight: bolder;
  font-size:larger;
  margin-top:5%; 
  margin-right:90%
}
</style>
